<template>
  <div class="order_complete">
    <!-- 按钮 -->
    <div class="btns">
      <el-form :inline="true" size="small">
        <el-form-item label="订单编号">
          <el-input v-model="param.code"></el-input>
        </el-form-item>
        <el-button size="small" icon="el-icon-search" @click="loadOrders"
          >搜索</el-button
        >
      </el-form>
    </div>
    <!-- 按钮 -->
    <!-- 列表 -->
    <jacky-order
      v-if="orderData.list.length > 0"
      :data="orderData.list"
      v-loading="loading"
      @toSendout="toSendoutHandler"
    ></jacky-order>
    <div v-else style="text-align: center; font-size: 14px; padding: 5em 0">
      还没有待发货的订单
    </div>
    <!-- /列表 -->

    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      small
      :hide-on-single-page="true"
      :total="orderData.total"
      :page-size="orderData.pageSize"
      :current-page="orderData.page"
      @current-change="currentChangeHandler"
    >
    </el-pagination>
    <!-- 分页 -->

    <!-- 模态框 -->
    <el-dialog
      title="发货"
      :visible.sync="visible"
      width="50%"
      class="customer_modal"
    >
      <div>
        <el-form :model="form" ref="collegeForm" label-width="80px">
          <el-form-item label="快递单号" prop="name">
            <el-input v-model="form.expressCode"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="submitHandler"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!-- 模态框 -->
  </div>
</template>
<script>
import { get, post } from "@/utils/request";
import _ from "lodash";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      loading: false,
      param: {
        page: 1,
        pageSize: 5,
        orderStatus: "已付款",
      },
      orderData: {
        list: [],
      },
      visible: false,
      form: {},
    };
  },
  created() {
    this.loadOrders();
  },
  computed: {
    ...mapGetters(["user"]),
  },
  methods: {
    // 查询
    loadOrders() {
      this.loading = true;
      let url = "/order/pageQuery";
      get(url, this.param).then((response) => {
        this.orderData = response.data;
        this.loading = false;
      });
    },
    // 提交发货信息
    submitHandler() {
      let url = "/order/sendout";
      post(url, this.form).then((response) => {
        this.$message({ type: "success", message: response.message });
        this.visible = false;
        this.loadOrders();
      });
    },
    // 去发货
    toSendoutHandler(o) {
      this.form.id = o.id;
      this.visible = true;
    },
    // 查询
    loadOrders() {
      this.loading = true;
      let url = "/order/pageQuery";
      get(url, this.param).then((response) => {
        this.orderData = response.data;
        this.loading = false;
      });
    },
    // 当前页发生改变
    currentChangeHandler(page) {
      this.param.page = page;
      this.loadOrders();
    },
  },
};
</script>
